from contextlib import contextmanager
from typing import List
from nicegui import app, ui


# 定义移动端导航栏，并作为上下文，“套”在每个移动端网页上
@contextmanager
def mobileframe(nav_title: str):
    ui.page_title(nav_title)
    LOGO_PATH = "/assets/img/logo.png"
    # 系统名称
    SYSTEM_NAME = "基站系统名称"
    # 设置页面元数据，优化移动端显示
    ui.add_head_html(
        ' <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">'
    )
    # <!-- 适配刘海屏 -->
    ui.add_head_html(' <meta name="apple-mobile-web-app-capable" content="yes">')
    ui.add_head_html(
        ' <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">'
    )

    # 移动端可能需要不同的头部样式
    with ui.header().classes("w-full bg-sky-600 p-4"):  # sm:w-1/4
        with ui.row().classes("w-full justify-center items-center p-2"):
            ui.image(LOGO_PATH).classes("w-1/3 h-auto")
            ui.label(SYSTEM_NAME).classes(
                "w-2/3 justify-center text-center text-white text-2xl font-bold ml-4"
            )
    yield
    # 将 footer 移到外层，使其成为页面内容的直接子元素
    with ui.footer().classes("bg-sky-600 border-t border-gray-200"):
        # 底部导航栏，使用 Tailwind CSS 的 flex 布局，让按钮水平排列
        with ui.row().classes("justify-around w-full"):
            ui.button("5G", icon="home").classes(
                "bg-transparent border-none text-blue-700"
            ).on_click(lambda: print("切换到工作台"))
            ui.button("4G", icon="apps").classes(
                "bg-transparent border-none text-gray-600"
            ).on_click(lambda: print("切换到应用"))
            ui.button("基站", icon="folder").classes(
                "bg-transparent border-none text-gray-600"
            ).on_click(lambda: print("切换到项目"))
